<script setup lang="ts">
import Card from "../../components/Card.vue";
import { onMounted, useTemplateRef } from "vue";
import { animate, onScroll } from "animejs";
import { useRouter } from "vue-router";
import { useTeaStore } from "../../store/teaStore.ts";

const teaStore = useTeaStore();
const router = useRouter();
const cards = useTemplateRef("cards");

// 依赖注入
// const teas = inject<ITea[]>("teas");
const teas = teaStore.teaList;

const clickGoToTea = (id: number) => {
  router.push({ name: "tea", params: { id: id }});
};

onMounted(() => {
  if (cards.value) {
    animate(cards.value, {
      duration: 500,
      x: { from: 250, to: 0 },
      opacity: { from: 0.5, to: 1 },
      autoplay: onScroll({
        container: document.body,
        target: cards.value,
        enter: "300 start"
      })
    });
  }
});
</script>

<template>
  <section class="section" style="transition: all 0.3s">
    <h2 class="section-title">八大茶叶</h2>
    <p>中国茶文化历史悠久, 茶叶种类繁多,</p>
    <p>
      其中八大名茶最为著名, 即杭州龙井、
      黄山毛峰、苏州碧螺春、安溪铁观音、庐山云雾、白毫银针、武夷岩茶、普洱茶。
    </p>
    <p>每种茶叶都有其独特的风味和特点, 深受茶爱好者的喜爱。</p>
    <div class="cards" ref="cards">
      <template v-if="teas">
        <Card v-for="item in teas" :key="item.title" class="card-mouseover" @click="clickGoToTea(item.id)">
          <div class="img">
            <img :src="item.imgSrc" :alt="item.title" width="100%" height="100%" />
          </div>
          <div class="description">
            <p>{{ item.title }}</p>
            <p>{{ item.description }}</p>
          </div>
        </Card>
      </template>
    </div>
  </section>
</template>

<style scoped>
.cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: space-between;
  row-gap: 36px;
  margin-top: 3rem;
}

.card-mouseover {
  cursor: pointer;
}

.card-mouseover .img {
  width: 100%;
  height: 30%;
  overflow: hidden;
}

.card-mouseover:hover {
  width: 35%;
}

.card-mouseover:hover .img {
  filter: brightness(1.2);
  transition: all 1s ease-out;
}
</style>